import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { observer } from 'mobx-react';
import React from 'react';
import useStore from '../../../store';

function Index() {
  const { search } = useStore();
  const { searchValue } = search;

  return (
    <div className="fixed w-screen top-0 left-0 bg-black/30 h-screen z-[99]">
      <div className="w-[60%] mt-[120px] rounded-lg bg-new-desc-dark/60 backdrop-blur-md py-4 mx-auto my-auto relative">
        <div className="absolute top-1 right-2 cursor-pointer" onClick={() => search.hideSearch()}>
          <CloseOutlined />
        </div>
        <div className="px-4 border-b border-gray-500">
          <Input
            className="!bg-transparent !border-none focus:outline-none dark:text-new-text-dark  py-2"
            style={{
              boxShadow: 'none',
            }}
            prefix={<SearchOutlined />}
            value={searchValue}
            onChange={e => search.searchValue(e.target.value)}
          ></Input>
        </div>
        {searchValue && (
          <div className="p-4">
            <div className="text-new-text-dark">
              <span>Search</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default observer(Index);
